 <template>
 	<div class="movie-list">

 		<!-- 搜索栏 -->
 		<el-card class="search-card">
 			<el-form :inline="true" :model="searchForm" class="search-form">
 				<el-form-item label="关键词">
 					<el-input v-model="searchForm.keyword" placeholder="电影名称/导演/演员" clearable />
 				</el-form-item>
 				<el-form-item label="类型">
 					<el-select v-model="searchForm.type" placeholder="选择电影类型" clearable filterable
 						:loading="loadingTypes" @change="handleTypeChange">
 						<el-option v-for="item in typeOptions" :key="item.value" :label="item" :value="item" />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="状态">
 					<el-select v-model="searchForm.status" placeholder="选择状态" clearable>
 						<el-option label="正在上映" value="showing" />
 						<el-option label="即将上映" value="coming" />
 						<el-option label="已下架" value="ended" />
 					</el-select>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="handleSearch">搜索</el-button>
 					<el-button @click="handleReset">重置</el-button>
 				</el-form-item>
 			</el-form>
 		</el-card>
 		<!-- 操作栏 -->
 		<el-card class="operation-card">
 			<div class="operation-bar">
 				<el-button type="primary" @click="handleAdd">添加电影</el-button>
 			</div>
 		</el-card>

 		<!-- 电影列表 -->
 		<el-card class="list-card">
 			<el-table :data="movieList" border style="width: 100%">
 				<el-table-column prop="id" label="ID" width="50" />
 				<el-table-column prop="name" label="电影名称" min-width="100" />
 				<el-table-column prop="director" label="导演" width="80" />
 				<el-table-column prop="stars" label="主演" min-width="100" />
 				<el-table-column prop="type" label="类型" width="70">
 					<template slot-scope="scope">
 						<el-tag :type="getTypeTag(scope.row.type)">{{ scope.row.type }}</el-tag>
 					</template>
 				</el-table-column>
 				<el-table-column prop="duration" label="时长(分钟)" width="60">
 					<template #default="scope">
 						{{ scope.row.duration }}
 					</template>
 				</el-table-column>
 				<el-table-column prop="rate" label="评分" min-width="80">
 					<el-rate v-model="movieForm.rating" show-score text-color="#ff9900" disabled />
 				</el-table-column>
 				<el-table-column prop="releaseDate" label="上映日期" width="130" />
 				<!-- 				<el-table-column prop="desc" label="电影描述" min-width="200" /> -->
 				<el-table-column prop="status" label="状态" min-width="50" />
 				<!-- 新增图片列 -->
 				<el-table-column prop="poster" label="海报" width="120">
 					<template slot-scope="scope">
 						<el-popover placement="right" trigger="hover">
 							<img :src="scope.row.poster" style="max-width:400px;max-height:600px">
 							<template #reference>
 								<el-image :src="scope.row.poster" :preview-src-list="[scope.row.poster]" fit="cover"
 									style="width:80px;height:120px">
 									<div slot="error" class="error-slot">加载失败</div>
 								</el-image>
 							</template>
 						</el-popover>
 					</template>
 				</el-table-column>

 				<el-table-column label="操作" width="150">
 					<template slot-scope="scope">
 						<el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
 						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
 					</template>
 				</el-table-column>

 			</el-table>
 			<!-- 分页 -->
 			<div class="pagination-container">
 				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
 					:current-page="1" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize"
 					layout="total, sizes, prev, pager, next, jumper" :total="total" />
 			</div>
 		</el-card>


 		<!-- 电影表单对话框 -->
 		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" @close="handleClose">
 			<el-form ref="movieForm" :model="movieForm" label-width="100px">
 				<el-form-item label="电影名称" prop="name">
 					<el-input v-model="movieForm.name" placeholder="请输入电影名称" />
 				</el-form-item>
 				<el-form-item label="导演" prop="director">
 					<el-input v-model="movieForm.director" placeholder="请输入导演" />
 				</el-form-item>
 				<el-form-item label="主演" prop="stars">
 					<el-input v-model="movieForm.stars" placeholder="请输入主演" />
 				</el-form-item>
 				<el-form-item label="类型">
 					<el-select v-model="movieForm.type" placeholder="选择电影类型" clearable filterable
 						:loading="loadingTypes" @change="handleTypeChange">
 						<el-option v-for="item in typeOptions" :key="item.value" :label="item" :value="item" />
 					</el-select>
 				</el-form-item>

 				<el-form-item label="时长" prop="duration">
 					<el-input-number v-model="movieForm.duration" :min="1" :max="300" />
 					<span class="duration-unit">分钟</span>
 				</el-form-item>
 				<el-form-item label="上映日期" prop="releaseDate">
 					<el-date-picker v-model="movieForm.releaseDate" type="date" placeholder="选择上映日期"
 						value-format="yyyy-MM-dd" />
 				</el-form-item>
 				<el-form-item label="评分" prop="rating">
 					<el-rate v-model="movieForm.rate" :max="5" show-score text-color="#ff9900" />
 				</el-form-item>
 				<el-form-item label="状态" prop="status">
 					<el-select v-model="movieForm.status" placeholder="请选择状态">
 						<el-option label="正在上映" value="showing" />
 						<el-option label="即将上映" value="coming" />
 						<el-option label="已下架" value="ended" />
 					</el-select>
 				</el-form-item>
 				<el-form-item label="海报">
 					<el-upload class="movie-poster-uploader" action="http://localhost:9999/api/movie/posterUpload"
 						:show-file-list="false" :on-success="handlePosterSuccess" :before-upload="beforePosterUpload">
 						<img v-if="movieForm.poster" :src="movieForm.poster" class="poster">
 						<i v-else class="el-icon-plus poster-uploader-icon"></i>
 					</el-upload>
 				</el-form-item>
 				<el-form-item label="简介">
 					<el-input v-model="movieForm.description" type="textarea" :rows="4" placeholder="请输入电影简介" />
 				</el-form-item>
 			</el-form>
 			<div slot="footer" class="dialog-footer">
 				<el-button @click="dialogVisible = false">取 消</el-button>
 				<el-button type="primary" @click="handleSubmit">确 定</el-button>
 			</div>
 		</el-dialog>


 	</div>

 </template>

 <script>
 	import {
 		movieTypesApi,
 		movieAddApi,
 		findAllMoviesApi,
 		findByKeywordsApi
 	} from '@/api/movie'

 	export default {
 		data() {
 			return {
 				movieList: [],
 				searchForm: {
 					keyword: '',
 					type: '',
 					status: ''
 				},
 				currentPage: 1,
 				pageSize: 5,
 				total: 10,
 				typeOptions: [],
 				loadingTypes: false,
 				dialogVisible: false,
 				dialogTitle: '添加电影',
 				movieForm: {
 					name: '',
 					director: '',
 					stars: '',
 					type: '',
 					duration: 120,
 					releaseDate: '',
 					status: '',
 					poster: '',
 					description: ''
 				},
 				rules: {
 					name: [{
 							required: true,
 							message: '请输入电影名称',
 							trigger: 'blur'
 						},
 						{
 							min: 2,
 							max: 50,
 							message: '长度在 2 到 50 个字符',
 							trigger: 'blur'
 						}
 					],
 					director: [{
 						required: true,
 						message: '请输入导演姓名',
 						trigger: 'blur'
 					}],
 					stars: [{
 						required: true,
 						message: '请输入主演',
 						trigger: 'blur'
 					}],
 					type: [{
 						required: true,
 						message: '请选择电影类型',
 						trigger: 'change'
 					}],
 					duration: [{
 						required: true,
 						message: '请输入电影时长',
 						trigger: 'blur'
 					}],
 					releaseDate: [{
 						required: true,
 						message: '请选择上映日期',
 						trigger: 'change'
 					}],
 					status: [{
 						required: true,
 						message: '请选择电影状态',
 						trigger: 'change'
 					}]
 				}
 			}
 		},
 		created() {
 			this.handleMovieTypes();
 			this.handleFindAllMovies(1, this.pageSize);
 		},
 		methods: {
			/**
			 * 关键字查询
			 */
 			async handleSearch() {
 				let {
 					data
 				} = await findByKeywordsApi(this.searchForm.keyword);
 				// console.log(data.results);
 				this.movieList = data.results;
 			},
			/**
			 * 切换当前页
			 * @param {Object} curr 当前页数
			 */
 			handleCurrentChange(curr) {
 				this.currentPage = curr;
 				this.handleFindAllMovies(this.currentPage, this.pageSize);
 			},
			/**
			 * 切换当前页的行数
			 * @param {Object} pageSize 每页行数
			 */
 			handleSizeChange(pageSize) {
 				this.pageSize = pageSize;
 				this.handleFindAllMovies(this.currentPage, this.pageSize);
 			},
			/**  分页查询
			 * @param {Object} currPage 当前页数
			 * @param {Object} pageSize 每页行数
			 */
 			async handleFindAllMovies(currPage, pageSize) {
 				let {
 					data
 				} = await findAllMoviesApi(currPage, pageSize);
 				let pageVo = data.results;
 				this.movieList = pageVo.records;
 				this.total = pageVo.total;
 			},
 			async handleMovieTypes() {
 				try {
 					//调用接口,{{data}} -->response.data-->HttpResult
 					let {
 						data
 					} = await movieTypesApi();
 					this.typeOptions = data.results;
 				} catch (error) {
 					this.$notify({
 						title: '错误',
 						message: error.message || '请求异常',
 						type: 'error'
 					});
 				} finally {
 					//最终要做的工作
 				};
 			},

 			// 添加电影
 			handleAdd() {
 				this.dialogTitle = '添加电影'
 				this.dialogVisible = true
 			},
 			handleTypeChange(value) {
 				this.$emit('type-change', value);
 			},
 			getTypeTag(type) {
 				const typeMap = {
 					'动作': 'danger',
 					'喜剧': 'success',
 					'爱情': 'warning',
 					'科幻': 'info',
 					'动画': 'error'
 				}
 				return typeMap[type] || ''
 			},
 			// 编辑电影
 			handleEdit(row) {
 				this.dialogTitle = '编辑电影'
 				this.movieForm = {
 					...row
 				}
 				this.dialogVisible = true
 			},
 			// 删除电影
 			handleDelete(row) {
 				this.$confirm('确认删除该电影吗？', '提示', {
 					type: 'warning'
 				}).then(() => {
 					this.deleteMovie(row.id)
 					this.$message.success('删除成功')
 				}).catch(() => {})
 			},

 			// 重置搜索
 			handleReset() {
 				this.searchForm = {
 					keyword: '',
 					type: '',
 					status: ''
 				}

 			},

 			// 对话框关闭
 			handleClose() {
 				this.$refs.movieForm.resetFields()
 				this.movieForm = {
 					name: '',
 					director: '',
 					actors: '',
 					type: '',
 					duration: 120,
 					releaseDate: '',
 					status: '',
 					poster: '',
 					desc: ''
 				}
 			},
 			handlePosterSuccess(response, file) {
 				console.log("--imgURL-->" + response.results);
 				if (response.code === 200) {
 					// 方案1：直接使用服务器返回的在线地址
 					//this.movieForm.poster = response.data.url	
 					// 方案2：本地预览（仅临时显示）
 					this.movieForm.poster = response.results;

 					this.$message.success('上传成功')
 				} else {
 					this.$message.error(response.message || '上传失败')
 				}
 			},

 			// 海报上传前校验
 			beforePosterUpload(file) {
 				const isImage = file.type.startsWith('image/')
 				const isLt2M = file.size / 1024 / 1024 < 2

 				if (!isImage) {
 					this.$message.error('只能上传图片文件!')
 				}
 				if (!isLt2M) {
 					this.$message.error('图片大小不能超过 2MB!')
 				}
 				return isImage && isLt2M
 			},

 			async addMoive() {
 				let {
 					data
 				} = await movieAddApi(this.movieForm);
 				this.$message.success('电影添加成功');
 				//this.handleFindAllMovies();
 			},

 			// 提交表单
 			handleSubmit() {
 				this.addMoive();
 			}

 		}
 	}
 </script>

 <style>
 	.el-table tr {
 		color: #fff !important;
 		background-color: #000 !important;
 	}

 	.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
 		background-color: green;
 	}


 	.el-rate__icon {
 		color: #FFD700 !important;
 	}
 </style>

 <style lang="scss" scoped>
 	@import '@/styles/variables.scss';

 	.movie-list {
 		padding: 20px;

 		.search-card {
 			margin-bottom: 20px;
 		}

 		.operation-card {
 			margin-bottom: 20px;

 			.operation-bar {
 				display: flex;
 				justify-content: space-between;
 				align-items: center;
 			}
 		}

 		.list-card {
 			margin-bottom: 20px;

 			.pagination-container {
 				margin-top: 20px;
 				text-align: right;
 			}
 		}

 		.duration-unit {
 			margin-left: 10px;
 		}

 		.movie-poster-uploader {
 			:deep(.el-upload) {
 				border: 1px dashed #d9d9d9;
 				border-radius: 6px;
 				cursor: pointer;
 				position: relative;
 				overflow: hidden;

 				&:hover {
 					border-color: #409EFF;
 				}
 			}
 		}

 		.poster-uploader-icon {
 			font-size: 28px;
 			color: #8c939d;
 			width: 178px;
 			height: 178px;
 			line-height: 178px;
 			text-align: center;
 		}

 		.poster {
 			width: 178px;
 			height: 178px;
 			display: block;
 		}

 	}
 </style>